<template>
  <van-sticky>
    <van-row justify="space-between" align="center" class="bg-f">
      <van-col :span="2" @click="goBack" class="text-center">
        <van-icon name="arrow-left" color="#333" size="18" />
      </van-col>
      <van-col :span="22">
        <van-search
          v-model="search"
          :show-action="true"
          label="商品"
          placeholder="请输入搜索关键词"
          :autofocus="true"
          @update:model-value="getKeywordList"
          @clear="clear"
          :clearable="false"
        >
          <template #action>
            <div @click="onClickButton">搜索</div>
          </template>
        </van-search>
      </van-col>
    </van-row>
  </van-sticky>

  <section
    class="keyword_list padded-10"
    v-if="keywordList.length > 0 && !isSearch"
  >
    <van-row
      justify="start"
      align="center"
      v-for="(item, index) in keywordList"
      :key="index"
      class="list p-b-10 p-t-10 van-hairline--bottom"
      @click="searchData(item.name)"
    >
      <van-col :span="2">
        <van-icon name="search" color="#777" size="20" />
      </van-col>
      <van-col :span="22" v-html="filterTxt(item.name)" class="van-ellipsis">
      </van-col>
    </van-row>
  </section>
  <section class="goods" v-if="isSearch">
    <van-empty
      description="暂无数据"
      v-if="goods.list.length == 0 && params.p == 1 && !goods.params.loading"
    />
    <van-list
      v-model:loading="goods.params.loading"
      :finished="goods.params.finished"
      :finished-text="`${params.p > 1 ? `没有更多了` : ``}`"
      @load="getSearchList"
    >
      <van-row
        justify="space-between"
        align="center"
        class="list padded-10 van-hairline--bottom"
        v-for="(item, index) in goods.list"
        :key="index"
        @click="detail(item.id)"
      >
        <van-col>
          <van-row justify="start" align="center">
            <van-col>
              <van-image
                width="100px"
                height="100px"
                fit="cover"
                :src="item.image"
              />
            </van-col>
            <van-col class="p-l-10">
              <div class="ftn14 p-b-10 van-ellipsis" v-text="item.name"></div>
              <div class="ftn12 text-7 p-b-10">
                下单{{ item.price }}元,返<span
                  class="text-green"
                  v-text="item.goBprice"
                ></span
                >元
              </div>
              <div class="ftn12 text-7">剩1/13份</div>
            </van-col>
          </van-row>
        </van-col>
        <van-col>
          <van-button type="primary" size="mini">抢试用</van-button>
        </van-col>
      </van-row>
    </van-list>
  </section>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { fnGetkeywordList, fnGetDataList } from "@/service/search";
import type { ISearch } from "@/api/type";
export default defineComponent({
  setup(props: any, ctx) {
    const search = ref(""),
      router = useRouter(),
      keywordList = ref<any>([]),
      isSearch = ref(false);
    let params = ref<ISearch>({
      keyword: "",
      p: 0,
      n: 10,
    });

    let goods: any = reactive({
      params: {
        loading: false,
        finished: false,
        isLoading: false
      } as any,
      list: [] as any[],
    });
    // 搜索
    const onClickButton = () => {
      searchData(search.value);
    };
    // 返回上一页
    const goBack = () => {
      router.push({
        name: 'home'
      });
    };

    // 搜索
    const searchData = (txt: string) => {
      if (txt) {
        search.value = txt;
        isSearch.value = true;
        goods.params = {
          isLoading: false,
          finished: false,
          loading: false
        }
        goods.list = [];
        params.value = {
          keyword: search.value,
          p: 0,
          n: 10,
        };
        getSearchList();
      }
    };

    // 搜索列表
    const getSearchList = () => {
      let { finished, loading, isLoading } = goods.params;
      if (!finished && !isLoading) {
        goods.params.isLoading = true;
        params.value.p++;
        fnGetDataList(params.value).then((res) => {
          isLoading = false;
          if (res) {
            if (res.status) {
              goods.list = [...goods.list, ...res.data];
            } else {
              if (params.value.p == 1) goods.list = [];
              finished = true;
            }
            goods.params = { loading, finished, isLoading };
          }
          
        });
      } else {
        return false;
      }
    };
    // 动态搜索关键词
    const getKeywordList = (e: string) => {
      if (e) {
        isSearch.value = false;
        fnGetkeywordList({ keyword: search.value }).then((res) => {
          if (res && res.status) {
            keywordList.value = res.data;
          } else {
            keywordList.value = [];
          }
        });
      } else {
        isSearch.value = false;
        keywordList.value = [];
      }
    };
    // 过滤搜索关键词
    const filterTxt = (txt: string) => {
      let reg = "/" + search.value + "/g";
      return txt.replace(
        eval(reg),
        `<span class="text-green">${search.value}</span>`
      );
    };

    // 清除关键词
    const clear = (e: any) => {
      search.value = "";
      isSearch.value = false;
      keywordList.value = [];
    };

    const detail = (id: number) => {
      router.push({
        name: 'product',
        params: {id: id}
      })
    }
    return {
      search,
      isSearch,
      goods,
      onClickButton,
      goBack,
      filterTxt,
      getKeywordList,
      keywordList,
      searchData,
      clear,
      getSearchList,
      params,
      detail
    };
  },
});
</script>
<style lang="less">
.keyword_list {
  padding: 10px;
}
</style>
